<template>
	<view style="width: 100%;background-color: white;">
		<view style="width: 100%;min-height: 100vh;overflow-y: auto;">
			<view style="width: 100%;height: auto;">
				<image :src="poster" style="width: 100%;" mode="widthFix"></image>
				<view style="width: 100%;height: 160rpx;display: flex;justify-content: space-between;padding: 0 40rpx;">

					<view style="display: grid;">
						<view style="font-size: 30rpx;font-weight: 600;margin-top: 20rpx;">{{info.name}}</view>
						<view style="display: flex;line-height: 30rpx;">
							<image :src="kanguoUrl" style="width: 30rpx;height: 30rpx;"></image>
							<view style="font-size: 24rpx;color: #9D9D9D;">{{info.click_num}}人看过</view>
						</view>
					</view>

					<view style="display: grid;text-align: center;">
						<view style="font-style: italic;color: #ea5550;font-size: 40rpx;margin-top: 20rpx;">
							￥{{info.price}}

						</view>
						<view
							style="font-style: italic;color: lightgray;text-decoration:line-through;font-size: 24rpx;margin-top: -10rpx;">
							价格￥{{info.original_price}}
						</view>
					</view>


				</view>
				<view style="width: 100%;height: 0.3rpx;background-color: lightgray;"></view>
			</view>
			<!-- 			<view class="u-tabs-box sticky-box" :style="platform == 'ios' ? {'top':statusBarHeight  + 'px'} : {'top':0} ">
				<utabsswiper activeColor="#ea5550" ref="tabs" :list="list" :current="current" @change="change"
					:fontSize="24" :is-scroll="false" swiperWidth="750"></utabsswiper>
			</view> -->
			<view class="u-tabs-box sticky" :style="stickyStyle">
				<utabsswiper activeColor="#ea5550" ref="tabs" :list="list" :current="current" @change="change"
					:fontSize="24" :is-scroll="false" swiperWidth="750"></utabsswiper>
			</view>

			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
				:style="swiperCurrent == 0 ? {'height':detailHeight + 'px'} : {'height':dagangHeight + 'px'} "
				@animationfinish="animationfinish">

				<swiper-item class="swiper-item" v-show="swiperCurrent == 0">
					<view style="width: 100%;">
						<image v-for="(item,index) in detail" :src="item.img"
							style="width: 100%;margin: -12rpx 0 0 0;padding: 0rpx" mode="widthFix"></image>
					</view>
				</swiper-item>

				<swiper-item class="swiper-item" v-show="swiperCurrent == 1">
					<view style="width: 100%;">
						<image v-for="(item,index) in dagang" :src="item.url"
							style="width: 100%;margin: -12rpx 0 0 0;padding: 0rpx" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view :class=" platform == 'ios' ? 'bottomView_ios' : 'bottomView'">
			<view class="zxls" @click="toZxls('1')" style="border-right: 1rpx solid lightgray;">
				<view class="bottomImg">
					<view>
						<image :src="zxlsUrl">
						</image>
					</view>
					<view>咨询老师</view>
				</view>
			</view>
			<view class="zxls" @click="toZxls('2')" style="border-right: 1rpx solid lightgray;">
				<view class="bottomImg">
					<view>
						<image :src="dagangUrl">
						</image>
					</view>
					<view>领取大纲</view>
				</view>
			</view>
			<view class="zxls" @click="toZxls('3')">
				<view class="bottomImg">
					<view>
						<image :src="youhuiUrl">
						</image>
					</view>
					<view>领取优惠</view>
				</view>
			</view>
		</view>
		<delayPop ref="vipPop"></delayPop>
	</view>
</template>
<script>
	const app = getApp();
	const comUrl = "https://pic.mae.vip/%E4%BA%BA%E5%83%8F%E5%AE%9E%E6%88%98%E7%8F%AD%E7%B4%A0%E6%9D%90/";
	import {
		addClickRecord,
		getCourseTypeDetail,
		addCourseLearnRecord,
		getWechatURLLink,
	} from '@/api/home.js';
	import {
		loginMobile,
	} from "@/api/user";
	import {
		mapGetters
	} from "vuex";

	import animationType from '@/utils/animationType.js'
	import utabsswiper from '../backup/h-tabs-swiper.vue';
	import delayPop from '../backup/delayPop.vue';

	export default {
		props: {
			userId: {
				type: String,
				required: true
			},
			token: {
				type: String,
				required: true
			},
			couId: {
				type: String,
				required: true
			},
		},
		components: {
			utabsswiper,
			delayPop,
		},
		data() {
			return {
				kanguoUrl: comUrl + 'kanguo.png',
				zxlsUrl: comUrl + 'wechat.png',
				dagangUrl: comUrl + 'dagang.png',
				youhuiUrl: comUrl + 'youhui.png',
				screenWidth: uni.getSystemInfoSync().screenWidth,
				detailHeight: 0,
				dagangHeight: 0,
				dagang: [],
				detail: [],
				info: {},
				poster: '',
				current: 0,
				swiperCurrent: 0,
				list: [{
					name: '简介'
				}, {
					name: '大纲'
				}],
				platform: uni.getSystemInfoSync().platform,
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				scrollDistabce: 0,
				scrollPercent: 0,
				timer: 0, // 计时器的时间
				intervalId: null, // 定时器的 ID
				stickyStyle: '',
			}
		},
		mounted: function() {
			let that = this;

			that.getCourseTypeDetail();
			if (that.intervalId) return; // 防止重复启动
			that.intervalId = setInterval(() => {
				that.timer++;
				//console.log('计时器:', this.timer);
			}, 1000);

			window.viewCourseRecord = (param) => {
				console.log('hahaha');
				that.viewMyCourseRecord(param);
			};
			window.aabbcc = function() {
				console.log('aabbcc-Hello');
			};

			uni.$on('pageScroll', (scrollTop) => {
				//console.log('scrollTop=== ', scrollTop);
				if (scrollTop > 300) { // 滚动超过300时吸顶
					this.stickyStyle = 'position: fixed; top: 0; width: 100%; z-index: 999;';
				} else {
					this.stickyStyle = '';
				}

				if (scrollTop > that.scrollDistabce) {
					that.scrollDistabce = scrollTop;
					//that.scrollPercent = ((that.scrollDistabce / that.detailHeight) * 100 * 1000).toFixed(2)
					that.scrollPercent = ((that.scrollDistabce / that.maxHeight1) * 100).toFixed(0);
					//console.log('百分比:', that.scrollPercent);
				}
			});
		},
		beforeDestroy() {
			uni.$off('pageScroll'); // 避免内存泄漏
		},
		methods: {
			viewMyCourseRecord(pp) {
				console.log('viewMyCourseRecord调用成功');
				let that = this;

				let p = {};

				if (that.scrollPercent < 1) {
					that.scrollPercent = 1;
				}
				if (that.scrollPercent > 100) {
					that.scrollPercent = 100;
				}

				p.jindu = that.scrollPercent;
				p.times = that.timer;
				p.userId = that.userId;
				p.token = that.token;
				p.secId = '0';
				p.couId = that.couId;
				addCourseLearnRecord(p).then(res => {
					if (res.code == 0) {

					}
				})
			},
			stopTouchMove() {
				return false;
			},
			showPop() {
				let that = this;
				that.$refs.vipPop.showPop();
			},
			toZxls(i) {
				let that = this;
				that.addClick();

				let platform = uni.getSystemInfoSync().platform; //手机类型

				if (platform == 'ios') {
					window.webkit.messageHandlers.goWechat.postMessage("");
				}
				if (platform == 'android') {
					window.location.href = 'goWechat';
				}
			},
			addClick() {
				let that = this;
				let pp = {};
				let type = '';
				if (that.couId == '10091') {
					type = '风光实战班-咨询老师';
				} else if (that.couId == '10092') {
					type = '视频实战班-咨询老师';
				} else {

				}
				if (type != '') {
					pp.userId = that.userId;
					pp.token = that.token;
					pp.platform = that.platform == 'ios' ? '苹果' : '安卓';
					pp.type = type;
					addClickRecord(pp).then(res => {

					})
				}
			},
			getCourseTypeDetail() {
				let that = this;
				let pp = {};
				pp.userId = that.userId;
				pp.token = that.token;
				pp.couId = that.couId;
				getCourseTypeDetail(pp).then(res => {
					if (res.code == 0) {

						that.info = res.data.info;
						that.poster = res.data.poster;

						that.detailHeight = 0;
						that.dagangHeight = 0;
						that.dagang = res.data.dagang;
						that.detail = res.data.detail;
						for (let i = 0; i < that.detail.length; i++) {
							let width = that.detail[i].width;
							let height = that.detail[i].height;

							that.detailHeight = that.detailHeight + that.screenWidth * height / width;
						}
						for (let i = 0; i < that.dagang.length; i++) {
							let width = that.dagang[i].width;
							let height = that.dagang[i].height;

							that.dagangHeight = that.dagangHeight + that.screenWidth * height / width;
						}
						that.detailHeight = that.detailHeight + 60;
						that.dagangHeight = that.dagangHeight + 60;
					}
				})
			},
			change(current) {
				let that = this;
				that.$refs.tabs.setFinishCurrent(current);
				that.swiperCurrent = current;
				that.current = current;
			},
			transition({
				detail: {
					dx
				}
			}) {
				let that = this;
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				let that = this;
				that.$refs.tabs.setFinishCurrent(current);
				that.swiperCurrent = current;
				that.current = current;
			},
			videoErrorCallback: function(e) {
				//e.target.errMsg
			},
			jqueryUrl(url) {
				let arr = url.split('?');
				let params = arr[1].split('&');
				let obj = {};
				for (let i = 0; i < params.length; i++) {
					let param = params[i].split('=');
					obj[param[0]] = param[1];
				}
				return obj;
			},
		}
	}
</script>

<style lang="scss" scoped>
	page,
	body {
		height: 100%;
		width: 100%;
		background-color: white;
	}

	/deep/uni-swiper .uni-swiper-dots-horizontal {
		bottom: 40px !important;
	}

	/deep/uni-swiper .uni-swiper-dot-active {
		background: #ea5550;
	}

	/deep/uni-swiper .uni-swiper-dot {
		width: 6px;
		height: 6px;
	}

	.uni-margin-wrap {
		width: 100%;
		// height: 1000rpx !important;
		height: auto;
	}

	.bottomImg {
		display: grid;
		margin-top: 20rpx;
		font-size: 24rpx;

		image {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.canScroll {
		overflow-y: scroll;
	}

	.canntScroll {
		overflow-y: hidden;
	}

	.bottomView_ios {
		width: 100%;
		height: 140rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: white;
		display: flex;
		border-top: 1rpx solid lightgray;
	}

	.bottomView {
		width: 100%;
		height: 140rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: white;
		display: flex;
		border-top: 1rpx solid lightgray;
	}

	.zxls {
		// margin-top: 10rpx;
		width: 33.33%;
		height: 100%;
		text-align: center;
	}

	.swiper-box {
		// flex: 1;
		height: 100%;
		//margin: 30rpx;
		// padding: 30rpx;
	}

	.sticky-box {
		display: flex;
		position: -webkit-sticky;
		position: sticky;

		z-index: 9999;
		flex-direction: row;
		margin: 0px;
		background: #f5f5f5;
	}
</style>